<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Form Builder</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body ng-app="App">

<div ng-controller="FormBuilderCtrl as vm">
  <h4>TODO:</h4>
  <ul>
    <li>合并之后可能发生的总行数减少</li>
    <li>合并之后position的变化</li>
  </ul>
   selected cell:
  <div class="selectedCell">
    <pre>{{ vm.selectedElement | json }}</pre>
  </div>
  <h3>Table</h3>
  
  <table border="1" class="table">
   <tbody>
     <tr ng-repeat="tr in vm.dataCells track by $index">
          <td ng-repeat="(key, val) in tr"><form-cell></form-cell></td>
     </tr>
   </tbody>
  </table>
  
  <div class="btnGroup">
    <button ng-click="vm.reload()">reload data</button>
  </div>
  <div class="btnGroup">
      <button ng-click="vm.addCol()">add column</button>
      <button ng-click="vm.addRow(false)">add row above (false)</button>
      <button ng-click="vm.addRow(true)">add row below (true)</button>
      <button ng-click="vm.addRow2()">add row</button>
      <button ng-click="vm.removeRow()">remove last row</button>
      <button ng-click="vm.removeCol()">remove select column</button>
      <button ng-click="vm.expandCell($event)" ng-disabled="vm.isExpand">expand cell</button>
  </div>

  <pre>{{ vm.data | json }}</pre>
</div>

<hr />
  
<div ng-controller="TestCtrl">
  <div ng-repeat="item in items" my-directive="item" index="$index"></div>
  <button ng-click="add()">add</button>
</div>

<script src='js/jquery-2.2.4.min.js'></script>
<script src='http://libs.useso.com/js/underscore.js/1.6.0/underscore.js'></script>
<script src='js/angular.min.js'></script>
<script src="js/index.js"></script>

</body>
</html>
